<template>
    <div>
        <icons padding="10 10 60 10" class="icons-warp">
            <div class="float-icon-item">
                <img :src="imgUrl" alt="" @click="handleIcons(routerUrl)">
            </div>
        </icons>
    </div>
</template>

<script>
    import icons from "@/components/s-icons/icons";

    export default {
        name: "floatIcon",
        props: ["imgUrl", "routerUrl"],
        components: {
            icons
        },
        methods: {
            // 点击按钮
            handleIcons(router) {
                console.log('router', router)
                this.$router.push({path: "/mobile/offices/claim/articleClaim"})
            },
        }
    }
</script>

<style scoped lang="less">
    .icons-warp {
        border-radius: 25px;

        .float-icon-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 50px;
            height: 50px;

            img {
                width: 25px;
                height: 25px;
                margin-bottom: 3px;
            }

            span {
                font-size: 9px;
                color: #666666;
            }
        }
    }
</style>
